<template>
	<pd-popup ref="popup" @change="popupChangeHandler">
		<view class="__pd_date_range_picker">
			<slot></slot>
			<view class="__picker_area">
				<picker-view
					:value="result"
					@pickstart='pickerInScrolling = true'
					@pickend='pickerInScrolling = false'
					@change="pickerChangeHandler"
					v-if="result.length">
					<picker-view-column class="__picker_view">
						<view class="__picker_item"  
							:class="{'__picker_active' : index === result[0]}"
							v-for="(item,index) in pickerOps[0]" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column class="__picker_view">
						<view class="__picker_item"  
							:class="{'__picker_active' : index === result[1]}"
							v-for="(item,index) in pickerOps[1]" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column class="__picker_view">
						<view class="__picker_item"  
							:class="{'__picker_active' : index === result[2]}"
							v-for="(item,index) in pickerOps[2]" :key="index">{{ item }}</view>
					</picker-view-column>
					<view class="__buffer_tag">-</view>
					<picker-view-column class="__picker_view">
						<view class="__picker_item"  
							:class="{'__picker_active' : index === result[3]}"
							v-for="(item,index) in pickerOps[3]" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column class="__picker_view">
						<view class="__picker_item" 
							:class="{'__picker_active' : index === result[4]}" 
							v-for="(item,index) in pickerOps[4]" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column class="__picker_view">
						<view class="__picker_item"  
							:class="{'__picker_active' : index === result[5]}"
							v-for="(item,index) in pickerOps[5]" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="__picker_footer">
				<button type="default" @tap="cancelHandler">取消</button>
				<button type="primary" :disabled="pickerInScrolling" @tap="confirmHandler">确认</button>
			</view>
		</view>
	</pd-popup>
</template>

<script setup lang="ts">
import PdPopup from './pd-popup.vue';
import { useCompRef } from '@/pd-libs/hooks/useRefs';
import PD from '../libs';
import type { WxFormChangeRes } from '../libs/wx-types';
import type { TsHelp } from '../libs/ts-help';
const result = ref<number[]>([]);//所选下标
const pickerOps = ref<Array<number[]>>([]);//选项数据
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();

const popup = useCompRef(PdPopup);
const pickerInScrolling = ref(false);

let resolver : TsHelp.PromiseResolver<{value : Array<number>}>;
let rejecter : () => void;
const open = () : Promise<{value : Array<number>}> => {
	return new Promise((r,j) => {
		resolver = r;
		rejecter = j;
		initOps();
		initResult();
		popup.value?.open();
	});
};

const pickerChangeHandler = (e : WxFormChangeRes<number[]>) => {
	//如果年/月与历史的不相等，重新构造日期，解决不同年份2月日期不同
	if(e.detail.value[0] !== result.value[0] || e.detail.value[1] !== result.value[1] || e.detail.value[3] !== result.value[3] || e.detail.value[4] !== result.value[4]){
		pickerOps.value[2] = PD.Tool.createArray(
			1, 
			new Date(pickerOps.value[0][e.detail.value[0]], pickerOps.value[1][e.detail.value[1]], 0).getDate()
		);
		pickerOps.value[5] = PD.Tool.createArray(
			1, 
			new Date(pickerOps.value[3][e.detail.value[3]], pickerOps.value[4][e.detail.value[4]], 0).getDate()
		);
	};
	result.value = e.detail.value;
};

const initOps = () => {
	pickerOps.value = [
		PD.Tool.createArray(year - 5, year),
		PD.Tool.createArray(1, 12),
		PD.Tool.createArray(
			1, 
			new Date(year, month, 0).getDate()
		),
		PD.Tool.createArray(year, year + 5),
		PD.Tool.createArray(1, 12),
		PD.Tool.createArray(
			1, 
			new Date(year, month, 0).getDate()
		)
	];
	
};

const initResult = () => {
	result.value = [
		pickerOps.value[0].indexOf(year),
		pickerOps.value[1].indexOf(month),
		pickerOps.value[2].indexOf(day),
		pickerOps.value[3].indexOf(year),
		pickerOps.value[4].indexOf(month),
		pickerOps.value[5].indexOf(day),
	];
};

const confirmHandler = () => {
	const s = new Date(pickerOps.value[0][result.value[0]], pickerOps.value[1][result.value[1]] - 1, pickerOps.value[2][result.value[2]]).getTime();
	const e = new Date(pickerOps.value[3][result.value[3]], pickerOps.value[4][result.value[4]] - 1, pickerOps.value[5][result.value[5]]).getTime();
	if(s > e){
		PD.UniHelp.modal('开始时间不能大于结束时间，请重新选择');
		return;
	};
	resolver && resolver({
		value : [s,e]
	});
	popup.value?.close();
};

const cancelHandler = () => {
	rejecter && rejecter();
	popup.value?.close();
};

const popupChangeHandler = (show : boolean) => {
	!show && cancelHandler();
};

defineExpose({
	open,
});

</script>

<style scoped lang="less">
.__pd_date_range_picker {
	padding: 32rpx 24rpx;
	background: #fff;
	border-radius: 16rpx 16rpx 0 0;
	.__picker_area {
		font-size: 28rpx;
		--h : 350rpx;
		.__picker_view {
			height: var(--h);
		}
		.__picker_item {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.__picker_active {
			font-size: 32rpx;
			font-weight: bold;
			color: var(--primary);
		}
		.__buffer_tag {
			width: 50rpx;
			text-align: center;
			height: var(--h);
			line-height: var(--h);
		}
	}
	.__picker_footer {
		margin-top: 50rpx;
		display: flex;
		gap : 32rpx;
		button {
			flex: 1;
		}
	}
}
</style>